<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import EnterpriseTaskItem from '@/components/EnterpriseTaskItem.vue'
import Condition from '@/components/Condition.vue'
import TaskPreviewView from '@/views/task/TaskPreviewView.vue'
import Footor from '@/components/Footor.vue'
import PersonApplyView from '@/components/PersonApplyView.vue'
import TaskCodeListView from './task/TaskCodeListView.vue'

export default {
  components: {
    HeaderNav,
    EnterpriseTaskItem,
    TaskContainer,
    Condition,
    TaskPreviewView,
    Footor,
    PersonApplyView,
    TaskCodeListView,
  },
  data() {
    return {
      previewTaskdata: '',
      assignTaskdata: '',
      assignedUserIds: [],
      checkTaskdata: '',
      loading: false,
      pagination: {
        page: 1,
        rows: 8,
        total: null,
      },
      condition: {}, // 查询条件
      conditionList: [],
      showPreviewDialog: false, // 控制预览对话框的显示
      showDialog: false,
      showDialog2: false,
      currentTask: null, // 当前任务信息
      taskList: [],      // 存储任务列表,
      checkTastdata: null,// 存储该任务下的学生姓名，答案等信息
      conditionLock: false, // 控制条件查询的锁
    }
  },
  methods: {
    previewTask(task) {
      // 这里可以根据 taskId 获取任务的详细信息
      this.previewTaskdata = task;
      this.showPreviewDialog = true;
    },
    assignTask(task) {
       this.assignTaskdata = task;
       this.assignedUserIds = [];
       this.showDialog = true ;
    },
    // 检查按钮
    async checkTask(task) {
      try {
        // 获取当前任务下的任务id
        const task_id = task.id
        const response = await this.$api.teacher_check_button(task_id);
        console.log("data", response.results);
        this.showDialog2 = true;
        this.checkTastdata = {
            ...task,
            results:[...response.results]
        };
        console.log("checkTastdata", this.checkTastdata);
    } catch (error) {
        console.error("Error fetching teacher task answers:", error);
    }
    },
    handlePageChange(page) {
      this.pagination.page = page;
      this.teacher_stucent_tasklist();
    },
    // 调取获取任务列表接口
    async teacher_stucent_tasklist(){
      const params = {
        ...this.condition,
        page: this.pagination.page,
        rows: this.pagination.rows,
      }
      try{
        // 调用接口
        const response = await this.$api.stucent_tasklist(params);
        console.log(response)
        this.taskList = response.results;
        console.log("taskList:", this.taskList)
        this.pagination.total = response.count || 0; // 设置分页总数
        // 只有在第一页（初始化）时才设置conditionList
        if (response.conditionList && this.pagination.page === 1) {
          this.conditionList = response.conditionList;
          console.log("conditionList:",this.conditionList)
        }
      }catch (error){
        console.error("获取任务列表失败:", err);
      }
    },
    async handleAssignTask(){
      console.log('Task ID:', this.assignTaskdata.id);
      console.log('User IDs:', this.assignedUserIds);
      try {
        await this.$api.assignTaskToUsers({
          task_id: this.assignTaskdata.id,
          user_ids: this.assignedUserIds,
      });

        // console.log("接口返回:", res);
        this.$message.success("分配成功");
        console.log("请求参数task_id:", this.assignTaskdata.id);
        const res = await this.$api.getTaskAssignUsers({ task_id: this.assignTaskdata.id});
        this.assignedUserIds = res.map(u => u.id);
        // // 重新拉取所有人员，刷新列表
        await this.$refs.personApplyView.fetchAllUsers();

        this.showDialog = false;
      } catch (error) {
        console.error("接口异常:", error.response || error);
        this.$message.error("分配失败");
    }
  },
  },
  created() {
    this.teacher_stucent_tasklist();
  },
  watch: {
    condition: {
      handler(val) {
        // 当条件变更时，重置到第一页
        this. pagination.page = 1;
        this.teacher_stucent_tasklist();
      },
      deep: true // 深度监听很重要，因为condition是一个对象
    }
  }
}
</script>

<template>
  <main class="enterprise-view">
    <!-- 系统导航 -->
    <HeaderNav active-index="0" class="nav-glass"></HeaderNav>
    <div class="glass-background"></div>

    <div class="content-wrapper">
      <!-- 搜索条件 -->
      <Condition :conditionList="conditionList" v-model="condition" class="condition-glass" />
      <!-- 任务列表 -->
      <div class="task-container-glass">
        <div class="task-items">
          <EnterpriseTaskItem v-for="task in taskList"
              :key="task.id"
              :id="task.id"
              :lang="task.langName || ''"
              :leave="task.leave || '未知'"
              :title="task.title ||'未知任务'"
              :module-name="task.module"
              @preview-click="previewTask(task)"
              @assign-click="assignTask(task)"
              @check-click="checkTask(task)">
          </EnterpriseTaskItem>
        </div>
        <div class="pagination-wrapper">
          <el-pagination
        background
        layout="prev, pager, next"
        hide-on-single-page
        :page-size="pagination.rows"
        :pager-count="11"
        v-model:current-page="pagination.page"
        :total="pagination.total"
        @current-change="handlePageChange"
      />
        </div>
      </div>
    </div>
  </main>

  <!-- 预览对话框 -->
  <el-dialog v-model="showPreviewDialog" title="任务预览" width="70%">
    <TaskPreviewView :task="previewTaskdata"/>
  </el-dialog>

  <el-dialog v-model="showDialog" title="分配人员" width="620" top="10vh">
    <PersonApplyView ref="personApplyView" v-model="assignedUserIds"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleAssignTask">保存</el-button>
        <el-button @click="showDialog = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="showDialog2" title="任务检查" width="70%" top="10vh">
    <TaskCodeListView :taskData="checkTastdata"/>
  </el-dialog>

  <!-- 添加底部备案信息 -->
  <Footor></Footor>
</template>

<style scoped>
.enterprise-view {
  min-height: 100vh;
  position: relative;
  background: linear-gradient(135deg, #151824 0%, #1c1f35 100%);
}

.content-wrapper {
  margin: 0 auto;
  padding: 20px 50px;
  position: relative;
  z-index: 1;
}

.glass-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 1px),
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  opacity: 0.5;
  z-index: 0;
}

.nav-glass,
.condition-glass,
.task-container-glass {
  backdrop-filter: blur(12px);
  background: rgba(21, 24, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.task-container-glass {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px;
}

.task-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.task-items>.task-item {
  flex: 0 1 calc(25% - 20px);
  /* 每行展示4个任务 */
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
}

.task-items>*:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 按钮样式调整 */
:deep(.condition-glass .el-button) {
  background: none;
  /* 去掉背景色 */
  border: none;
  /* 去掉边框 */
  color: rgba(255, 255, 255, 0.9);
  /* 设置字体颜色 */
}

:deep(.condition-glass .el-button:hover) {
  background: none;
  /* 去掉 hover 背景色 */
  color: #ffffff;
  /* 设置 hover 字体颜色 */
}

:deep(.condition-glass .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

:deep(.condition-glass .el-input__inner) {
  color: #e6e8f0;
}

:deep(.condition-glass .el-input__inner::placeholder) {
  color: rgba(230, 232, 240, 0.5);
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 添加分页样式 */
:deep(.el-pagination) {
  color: white;
  /* 设置页码字体颜色为白色 */
}

:deep(.el-pagination.is-background button),
:deep(.el-pagination.is-background .el-pager li) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e6e8f0;
  /* 设置按钮和页码的字体颜色 */
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
  background: rgba(74, 128, 255, 0.2);
  border-color: rgba(74, 128, 255, 0.3);
  color: #7a9dff;
  /* 设置当前页码的字体颜色 */
}

:deep(.el-pagination.is-background button:hover),
:deep(.el-pagination.is-background .el-pager li:hover) {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
  /* 设置悬停时的字体颜色 */
}
</style>
